<!DOCTYPE html>
{% load static %}
{% load jsonify %}

{% load ctxvalue %}

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <title>{{ page_label}}|{{ title }}</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <script>
        window.static_url = "{{ js_config.static_url }}"
    </script>
    <script src="{{ js_config.js_lib.jquery }}"></script>
    <script src="{{ js_config.js_lib.md5 }}"></script>
    <link rel="stylesheet" href="{{ js_config.js_lib.font_awesome }}">
    <script src="{{ js_config.js_lib.vuejs }}"></script>
    <!--    <script src="{{ js_config.js_lib.composition_api }}"></script>-->

    <!--<script src="{{ js_config.js_lib.vuex }}"></script>-->

    <link rel="stylesheet" href="{{ js_config.js_lib.bootstrap_css }}">
    <script src="{{ js_config.js_lib.bootstrap }}"></script>

    <script src="{{ js_config.js_lib.nice_validator }}"></script>
    <link rel="stylesheet" href="{{ js_config.js_lib.nice_validator_css }}">
    <!--<link rel="stylesheet" href="bower_components/Ionicons/css/ionicons.min.css">-->
    <!-- Theme style -->
    <script src="{{ js_config.js_lib.adminlte }}"></script>
    <link rel="stylesheet" href="{{ js_config.js_lib.adminlte_css }}">
    <link rel="stylesheet" href="{{ js_config.js_lib.adminlte_them_css }}">
    <!--    <script src="{{ js_config.js_lib.moment }}"></script>-->

    <script src="{{ js_config.js_lib.layer }}"></script>
    <script src="{{ js_config.js_lib.element }}"></script>
    <link href="{{ js_config.js_lib.element_css }}" rel="stylesheet">
    <script src="{{ js_config.js_lib.exfun }}"></script>
    <script src="{{ js_config.js_lib.director }}"></script>

    <script src="{{ js_config.js_lib.composition_api }}"></script>



    {% include 'director/reverse.html' %}


    <script src="{{ js_config.js_lib.jb_admin }}"></script>

    <!--<link rel="stylesheet" href="https://cdn.bootcss.com/admin-lte/2.4.3/css/AdminLTE.min.css">-->
    <!-- AdminLTE Skins. We have chosen the skin-blue for this starter
          page. However, you can choose any other skin. Make sure you
          apply the skin class to the body tag so the changes take effect. -->
    <!--<link rel="stylesheet" href="https://cdn.bootcss.com/admin-lte/2.4.3/css/skins/skin-blue.min.css">-->

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <!--<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>-->
    <!--<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>-->
    <![endif]-->

    <!--    <title>Admin</title>-->
    <!-- Google Font -->
    <!--<link rel="stylesheet"-->
    <!--href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">-->
    <!--<script src="https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js"></script>-->
    <script src="{{ js_config.js_lib.nprogress }}"></script>
    <link href="{{ js_config.js_lib.nprogress_css }}" rel="stylesheet">
    <!--<link href="https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">-->

    {% if js_config.crt_lan == 'en' %}
    <script src="{{ js_config.js_lib.element_en }}"></script>
    <script >
        ELEMENT.locale(ELEMENT.lang.en)
        {{js_config.js_lib.nprogress}}
    </script>
    {% endif %}
    <script>
        (function(){
            document.onreadystatechange = function(){
                NProgress.configure({ showSpinner: false });
                NProgress.start();
                console.log(document.readyState);
                if(document.readyState == "Uninitialized"){
                    NProgress.set(1);
                }
                if(document.readyState == "Interactive"){
                    NProgress.set(0.5);
                }
                if(document.readyState == "complete"){
                    NProgress.done();
                }
            }
        })();

        window.onbeforeunload=function(){
            NProgress.start();
            setInterval(function(){
                NProgress.inc()
            },300)

            if($('body').hasClass('sidebar-collapse')){
                sessionStorage.setItem(`${engine_name}.sidebar-collapse`,true);
            }else{
                sessionStorage.removeItem(`${engine_name}.sidebar-collapse`);
            }
        }


        var live_layout = {
            fullWin(){
                document.body.querySelector('#head-bar').className += ' live-hide'
                document.body.querySelector('#main-sidebar').className += ' live-hide'
                document.body.querySelector('.content-wrapper').className += ' on-live-hide'
            },
            exitFullWin(){
                document.body.querySelector('#head-bar').className = document.body.querySelector('#head-bar').className.replace('live-hide','')
                document.body.querySelector('#main-sidebar').className = document.body.querySelector('#main-sidebar').className.replace('live-hide','')
                document.body.querySelector('.content-wrapper').className =document.body.querySelector('.content-wrapper').className.replace('on-live-hide','')
            },
            fullContent(){
                document.body.querySelector('section.content').className+= ' full-content'
            },
        }

        function update_cnt_size(){
//        var cnt_ht =  Math.max( $(document).height(),window.innerHeight)
            var cnt_ht =  window.innerHeight ;//$('body').height() ;//
            const doc = document.documentElement

            if(!search_args._embed){
                // $('#there').height(cnt_ht -80)
                doc.style.setProperty('--content-height', cnt_ht -80+'px')
            }else{
                // $('#there').height(cnt_ht)
                doc.style.setProperty('--content-height', cnt_ht +'px')
            }

        }

        $(function () {
            update_cnt_size()
            $(window).resize(function(){
                update_cnt_size()
            });

        })


    </script>
    <style>
        body.embed #head-bar,body.embed #main-sidebar{
            display: none;
        }
        body.embed .wrapper>.content-wrapper{
            margin-left: 0 !important;
        }
        body.embed section.content{
            padding: 0;
            padding-left: 0;
            padding-right: 0;
        }
        /*body.embed .page-label{*/
        /*    display: none;*/
        /*}*/

        .live-hide{
            display: none;
        }

        /*@media (min-width: 768px){*/
        .wrapper>.on-live-hide.content-wrapper{
            margin-left: 0 !important;
        }
        /*}*/
        .full-content{
            padding: 0;
            padding-left: 0;
            padding-right: 0;
        }


        .bar{
            background: #dd453b !important;
        }

        .treeview:last-child ul{
            padding-bottom: 60px;
        }

        /*#there{*/
        /*    height: var( --content-height );*/
        /*}*/
    </style>
    {% block head-script %}
    {% endblock %}
</head>
<!--
BODY TAG OPTIONS:
=================
Apply one or more of the following classes to get the
desired effect
|---------------------------------------------------------|
| SKINS         | skin-blue                               |
|               | skin-black                              |
|               | skin-purple                             |
|               | skin-yellow                             |
|               | skin-red                                |
|               | skin-green                              |
|---------------------------------------------------------|
|LAYOUT OPTIONS | fixed                                   |
|               | layout-boxed                            |
|               | layout-top-nav                          |
|               | sidebar-collapse                        |
|               | sidebar-mini                            |
|---------------------------------------------------------|
-->



{% for lib in extra_js %}
<script src='{{ lib | ctxvalue:js_config.js_lib }}'></script>
{% endfor %}

{% for lib in extra_css %}
<link href='{{ lib | ctxvalue:js_config.js_lib }}' rel="stylesheet">
{% endfor %}

<script>
    if(js_config.is_debug){
        Vue.config.devtools = true
    }else{
        Vue.config.devtools = false
        Vue.config.productionTip=false
    }
    menu= {{menu| jsonify}}
    menu_search={{ menu_search | jsonify}}
    menu_expand_all = {{ menu_expand_all | json_or:'false' }}
    head_bar_data ={{head_bar_data | jsonify}}




</script>
<style>
    .wrapper{
        /*overflow-y: hidden;*/
    }
    .sidebar{
        position: absolute;
        top: 50px;
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: auto;
    }
    .sidebar-collapse  .sidebar{
        position: static;
        overflow: inherit;
    }
    .sidebar::-webkit-scrollbar {
        width: 6px!important;
        height: 6px!important;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none
    }

    .sidebar::-webkit-scrollbar-thumb {
        cursor: pointer;
        background: rgba(238, 238, 238, 0.75)
    }

    .sidebar::-webkit-scrollbar-thumb:hover {
        background: rgba(153,153,153,.4)
    }

</style>
<script>
    if(sessionStorage.getItem(`${engine_name}.sidebar-collapse`)){
        $('body').addClass('sidebar-collapse')
    }
</script>

<body class="hold-transition {{ ui_theme }} sidebar-mini {{body_class}}">
<!--    <div class="wrapper">-->

    <div id="live-app">
        <d-live-headerbar v-if="!full_live" :head_bar_data="head_bar_data" :fast_config_panel="fast_config_panel" v-if="show_top_header"></d-live-headerbar>
        <!-- Left side column. contains the logo and sidebar -->
        <d-live-mainsidebar v-if="!full_live" :menu="menu" :menu_expand_all="menu_expand_all" :menu_search="menu_search"
                            v-if="show_left_sidebar"
                            submenu-show="click"
                            :menu_search_value="menu_search_value"></d-live-mainsidebar>

        <!-- Content Wrapper. Contains page content -->
        <d-live-livecontent ref="live_content"  :editor="editor" :editor_ctx="editor_ctx"
                             :naked_live="naked_live" :full_live="full_live"></d-live-livecontent>
        <!-- Control Sidebar -->
        <d-live-rightpannel v-if="false"></d-live-rightpannel>
    </div>
<!--    </div>-->
</body>
<script>

    rootStore = new Vue()

    var editor= {{ editor | jsonify }}
    var editor_ctx = {{ editor_ctx | jsonify }}



    var fast_config_panel = {{fast_config_panel|json_or:"false"}}

    var full_live = {{full_live |json_or:"false" }}
    var naked_live ={{naked_live |json_or:"false"}}



    new Vue( {
        el:'#live-app',
        data:{
            head_bar_data:head_bar_data,
            fast_config_panel:fast_config_panel,

            menu:menu,
            menu_expand_all:menu_expand_all,
            menu_search:menu_search,
            menu_search_value:'',

            full_live:full_live,
            naked_live:naked_live,


            editor:editor,
            editor_ctx:editor_ctx
        },
        mounted(){
            window.root_live = this.$refs.live_content
        }
    })


</script>


<script>
    init_express={{ init_express | jsonify }}
    if(init_express){
        ex.eval(init_express)
    }
</script>

<style>
    .right-sidebar-mask{
        display: none;
    }
    .control-sidebar-open .right-sidebar-mask{
        display: block;
    }

</style>
</html>